<template>
  <button
    hover-class="none"
    :class="classNameList"
    :size="size"
    :plain="plain || transparent"
    :disabled="disabled || loading"
    :loading="loading"
    :priority="priority"
    :scope="scope"
    :open-type="openType"
    :session-from="sessionFrom"
    :show-message-card="showMessageCard"
    :send-message-path="sendMessagePath"
    :send-message-title="sendMessageTitle"
    :send-message-img="sendMessageImg"
    :style="styles"
    :business-id="businessId"
    :data-id="dataId"
    :data-obj="dataObj"
    @click.stop="onClick"
    @getuserinfo="onGetUserInfo"
    @getAuthorize="onGetAuthorize"
    @getphonenumber="onGetAuthorize"
    @contact="onContact"
    @error="onBindError"
  >
    <slot v-if="size!=='medium' || loading!==true" />
  </button>
</template>

<script>
export default {
  name: 'XButton',
  components: {},
  props: {
    // 按钮大小 大号，中等，小号，特小  large,medium,small,mini
    size: {
      type: String,
      default: 'medium'
    },
    styles: {
      type: String,
      default: ''
    },
    // 按钮类型 主要，默认， primary default
    type: {
      type: String,
      default: 'primary'
    },
    // 按钮优先级 次要，次次要 primary secondary secondary-secondary
    priority: {
      type: String,
      default: 'primary'
    },
    lang: {
      type: String,
      default: 'zh_CN'
    },
    scope: {
      type: String,
      default: ''
    },
    round: {
      type: Boolean,
      default: false
    },
    plain: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    // 按钮是否镂空，背景色透明
    transparent: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    showMessageCard: {
      type: Boolean,
      default: false
    },
    sendMessagePath: {
      type: String,
      default: ''
    },
    sendMessageTitle: {
      type: String,
      default: ''
    },
    sendMessageImg: {
      type: String,
      default: ''
    },
    sessionFrom: {
      type: [String, null],
      default: ''
    },
    businessId: {
      type: [String, Number],
      default: ''
    },
    openType: {
      type: String,
      default: ''
    },
    // 按钮传值
    dataId: {
      type: String,
      default: ''
    },
    // 按钮传值
    dataObj: {
      type: Object,
      default: () => {}
    },
    disabledType: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {

    };
  },
  computed: {
    // class列表
    classNameList() {
      const name = ['x-button'];
      name.push(`is-${this.size}`);
      if (this.transparent) {
        // 按钮是否镂空，背景色透明
        name.push('is-transparent');
      } else {
        name.push(`is-${this.type}`);
      }
      if (this.size) {
        name.push(`is-${this.size}`);
      }
      // 按钮优先级
      if (this.priority) {
        name.push(`is-${this.priority}`);
      }
      if (this.plain) {
        name.push('is-plain');
      }
      if (this.round) {
        name.push('is-round');
      }
      if (this.border) {
        name.push('is-border');
      }
      if (this.disabled || this.loading) {
        name.push('is-disabled');
        if (this.disabledType === 1) {
          name.push('is-disabled-1');
        }
      }
      if (this.disabled && this.priority) {
        name.push(`is-disabled-${this.priority}`);
      }
      return name.join(' ');
    }
  },
  watch: {},
  created() {},
  methods: {
    onClick(e) {
      this.$emit('click', e);
    },
    onGetAuthorize() {
      this.$emit('getAuthorize', ...arguments);
    },
    onGetUserInfo() {
      this.$emit('getUserInfo', ...arguments);
    },
    onContact({ detail }) {
      this.$emit('getContact', detail);
    },
    onBindError(e) {
      this.$emit('error', e);
    }
  }
};
</script>

<style lang="scss">
  .x-button{
    color: inherit; word-break: break-all; border-radius: 8px; text-align: center; vertical-align: middle;
    &:after{ display: none; }
    // 默认
    &.is-default{
      background-color: $uni-color-white; color: $uni-text-color;
      &:active{
        background-color: $uni-color-white;
      }
      &.is-plain{
        background: $uni-color-white; border: 2px solid #ddd !important; color: $uni-text-color;
        &:active{ background: $uni-color-white; }
      }
    }
    // 主要
    &.is-primary{
      background-color: $uni-color-primary; color: #fff;
      &:active{ background: #BC3619; }
    }
    // 微信
    &.is-wechat{
      background-color: #07C160; color: #fff;
      &:active{
        opacity: .9; background-color: #07C160;
      }
    }

    &.is-linear{
      background:linear-gradient(90deg,rgba(255,97,157,1),rgba(255,29,36,1)); color: #fff;
      &:active{
        background:linear-gradient(90deg,rgba(255,29,36,1),rgba(255,97,157,1));
      }
    }

    // 大号
    &.is-large{
      height: $uni-button-height-size-lg; line-height: $uni-button-height-size-lg; font-size: $uni-font-size-lg;
      &.is-round{ border-radius: $uni-button-height-size-lg;}
      &.is-border{ line-height: $uni-button-height-size-lg; }
    }
    // 中号
    &.is-medium{
      height: $uni-button-height-size-base; line-height: $uni-button-height-size-base; font-size: $uni-font-size-base;
      &.is-round{ border-radius: $uni-button-height-size-base;}
      &.is-border{ line-height: $uni-button-height-size-base; }
    }
    // 小号
    &.is-small{
      height: $uni-button-height-size-sm; line-height: $uni-button-height-size-sm; font-size: $uni-font-size-sm;
      &.is-round{ border-radius: $uni-button-height-size-sm;}
      &.is-border{ line-height: $uni-button-height-size-sm; }
    }
    // 超小号
    &.is-mini{
      height: $uni-button-height-size-mini; line-height: $uni-button-height-size-mini; font-size: $uni-font-size-mini;padding: 0 4px 0 4px;
      &.is-round{ border-radius: $uni-button-height-size-mini;}
      &.is-border{ line-height: $uni-button-height-size-mini - 4px; }
    }

    &.is-plain{
      background: transparent !important; border: 2px solid $uni-color-primary !important; color: $uni-color-primary;
      &:active{ background: transparent; }
    }

    // 边框
    //&.is-border{
    //  background-color: $uni-color-white; color: $uni-text-color; border: 2px solid #EDEDED !important;
    //}

    &.is-disabled,
    &.is-disabled:active{
      background: $uni-color-primary-light-8 !important; background-color: $uni-color-primary-light-8 !important; color: #FFFFFF !important;
    }
    &.is-disabled-1,
    &.is-disabled-1:active{
      background: #F2F3F5 !important; background-color: #F2F3F5 !important; color: #bbbbbb !important;
    }
    &.is-transparent{
      padding: 0; margin: 0; width: auto; border: 0; height: auto; line-height: inherit; font-size: inherit; border-radius: 0 !important;
      &:active{
        background-color: transparent;
      }
    }

    // 优先级按钮
    // 次要按钮
    &.is-secondary{
      background: $uni-color-white;color: $uni-color-primary;border: 2px solid $uni-color-primary !important;
      &:active{ background: #FEF0ED; }
    }
    &.is-disabled-secondary{
      color: $uni-color-primary !important;background: $uni-color-white !important;opacity: 0.7;
      &:active{ color: $uni-color-primary !important;background: $uni-color-white !important;}
    }
    // 次次要按钮
    &.is-secondary-secondary{
      background: $uni-color-white;color: $uni-color-default;border: 2px solid $uni-border-color1 !important;
      &:active{ background: #F7F8FA; }
    }
    &.is-disabled-secondary-secondary{
      color: #CCCCCC !important;background: #F7F8FA !important;
      &:active{ color: #CCCCCC !important;background: #F7F8FA !important;}
    }

    // cover
    &.is-cover{
      margin: 0;border: 0;padding: 0;height:100%;background: transparent;position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;
      &:active{
        background: transparent;
      }
    }
  }
</style>
